#{extends 'layout.html' /}
#{set title: 'Registrar Ingeridos' /}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet" href="@{'/public/stylesheets/jqamp-ui-spinner.min.css'}">
  <script type="text/javascript">
	function buscarAlimento() {
		$.ajax({
			url: "/paciente/dietas/buscarAlimento/"+$("#textAlimento").val(),
			cache: false
			}).done(function(resultado) {
				procesarResultado(resultado);
		});
	}
	
	function buscarAlimentoEA() {
		$.ajax({
			url: "/paciente/dietas/buscarAlimentoEA/"+$("#textAlimento").val(),
			cache: false
			}).done(function(resultado) {
				procesarResultado(resultado);
		});
	}
	
	// procesa el resultado de la busqueda de alimentos y establecimientos alimenticios
	function procesarResultado(resultado) {
		$("#resultadoAlimentos").empty();
		
		if ($.isEmptyObject(resultado)) {
			$("#resultadoAlimentos").html("No se encontraron resultados para esta búsqueda");
		}
		
		// se itera el resultado json y se genera cada alimento
		jQuery.each(resultado, function(i, val) {
			var img = "@{'/public/images/icons/Salad-icon.png'}";
			
			// TODO: clonar elelemento en lugar de usar el string
			//$result = $("#modeloAlimento").clone();
			var elemento = "<div class=\"alimentoSmall\">" +
			               "<div class=\"deleteBtn\"><a href=\"#\" class=\"deleteAlimento\">u</a></div>" +
			               "<div class=\"alimentoImage\"><img src=\"" +resultado[i].iconPath+ "\" alt=\"" +resultado[i].nombre+"\" /></div>";
			             
                       		if(resultado[i].iconPath == "/public/images/icons/Plato-icon.png"){
                       			elemento +="<div class=\"miniAutorBtn\"><a class=\"contactoAutor\">.</a></div>";
                       		}
		               
						   elemento += "<input type=\"hidden\" id=\"alimentos\" name=\"alimento\" value=\""+resultado[i].id+"\"> " +
						   "<input type=\"hidden\" id=\"cantidades\" name=\"cantidades\" value=\"1\">" + 
						   "<h3>" + resultado[i].nombre + "</h3>" +
						   "<div class=\"alimentoStepper\">" +
							   "<select > " +
							   "<option selected=\"selected\" value=\"1\">1</option>" +
							   "<option value=\"2\">2</option>" +
						   "<option value=\"3\">3</option>" +
						   "<option value=\"4\">4</option>" +
						   "<option value=\"5\">5</option>" +
						   "</select>"+
							   "</div" +
						   "</div>";
			console.log(elemento);
			$("#resultadoAlimentos").prepend(elemento);
		});
		
		$("#resultadoAlimentos .alimentoSmall").draggable({
			appendTo: "body",
			helper: "clone"
		});
	}
	
	function registrarAlimento(comida, alimento, cant) {
		console.log(dietaId);
		console.log(comida);
		console.log(alimento);
		console.log(cant);
		$.ajax({
			url: "/dietas/registrarIngerido?dietaId="+dietaId+"&comida="+comida+"&alimentoId="+alimento+"&cantPorciones="+cant,
			cache: false
			}).done(function( resultado ) {
				actualizarCalorias(resultado);
		});
	}
	
 	function eliminarAlimento(comida, alimento) {
 		console.log(comida);
		console.log(alimento);
		$.ajax({
			url: "/dietas/eliminarAlimento?dietaId="+dietaId+"&comida="+comida+"&alimentoId="+alimento,
			cache: false
			}).done(function( resultado ) {
 				actualizarCalorias(resultado);
		});
	}
 	
 	function modificarIngerido(object, comibleId) {
 		// necesario dieta, TipoComida, id comible, cant a actualizar.
 		var comida = $(object).parent().parent().parent().find('#comidaHolder').val();
 		console.log(comida);
 		var cant = $(object).val();
 		console.log(cant);
 		console.log(comibleId);
 		
 		$.ajax({
			url: "/dietas/modificarIngerido?dietaId="+dietaId+"&comida="+comida+"&comibleId="+comibleId+"&cantPorciones="+cant,
			cache: false
			}).done(function( resultado ) {
				actualizarCalorias(resultado);
		});
 		
 	}
 	
 	// actualiza las calorias de la dieta
 	function actualizarCalorias(calorias) {
 		$('#kcal').text(calorias);
 	}
	
	//id de la dieta visualizada
	var dietaId = ${dieta.getId()};
// 	console.log(${diaSemana});
// 	console.log(${diasDieta[0]});
</script>
</head>
<body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <nav>
  	<div id="navMenu">
        <ul>
            <li class="snapLi"><a id="do" #{if diasDieta[0] != 0} href="@{Dietas.show(plan.id, diasDieta[0])}" class="navItem" #{/if}>Domingo</a></li>
            <li class="snapLi"><a id="lu" #{if diasDieta[1] != 0} href="@{Dietas.show(plan.id, diasDieta[1])}" class="navItem" #{/if}>Lunes</a></li>
            <li class="snapLi"><a id="ma" #{if diasDieta[2] != 0} href="@{Dietas.show(plan.id, diasDieta[2])}" class="navItem" #{/if}>Martes</a></li>
            <li class="snapLi"><a id="mi" #{if diasDieta[3] != 0} href="@{Dietas.show(plan.id, diasDieta[3])}" class="navItem" #{/if}>Miércoles</a></li>
            <li class="snapLi"><a id="ju" #{if diasDieta[4] != 0} href="@{Dietas.show(plan.id, diasDieta[4])}" class="navItem" #{/if}>Jueves</a></li>
            <li class="snapLi"><a id="vi" #{if diasDieta[5] != 0} href="@{Dietas.show(plan.id, diasDieta[5])}" class="navItem" #{/if}>Viernes</a></li>
            <li class="snapLi"><a id="sa" #{if diasDieta[6] != 0} href="@{Dietas.show(plan.id, diasDieta[6])}" class="navItem" #{/if}>Sábado</a></li>
        </ul>
    </div>
    
  	<div id="navDrag"></div>
  </nav>
  
  <div id="main" role="main">
    	<div id="indicador"> <span id="kcal">${dieta.calcularCaloriasConsumidas()}</span> / ${dieta.plan.caloriasDiarias} kcal  
    	<span class="frecuentes">Alimentos Frecuentes</span>
    	<span class="buscador">Buscador de Alimentos</span>
    	</div>
  	<div id="flexbox">
    	<div id="flexLeft">
        	<div id="comidas">  
                  
        		<h3><a href="#">Desayuno</a></h3>
                <div class="placeholder">
                	<input type="hidden" id="comidaHolder" value="DESAYUNO"/>
                	#{list items:dieta.getAlimentosTipoComida('DESAYUNO'), as:'ingerido'}
                		<div class="alimentoBig">
	                    	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	                       	%{
	                       		if(ingerido.getComible().getClass().getName().equals("models.Plato")){
	                       			out.print('<div class="alimentoImage"><img src="/public/images/icons/Plato-icon.png" alt=${ingerido.comible.nombre} /></div><div class="autorBtn"><a class="contactoAutor">.</a></div>');
	                       		}else{
	                       			out.print('<div class="alimentoImage"><img src="'+"${ingerido.comible.iconPath}"+'" alt=${ingerido.comible.nombre} /></div>');
	                       		}
	                    	}%
	                    	<h3>${ingerido.comible.nombre}</h3>
	                    	<input type="hidden" id="alimentos" name="alimento" value="${ingerido.comible.id}">
	                    	<input type="hidden" id="cantidades" name="cantidades" value="1">
	                    	<div class="alimentoStepper">
	                    		<select onchange="modificarIngerido(this, ${ingerido.comible.id})">
									#{list items:0..5, as:'i'}
    									<option #{if ingerido.cantPorcionesIngeridas == i} selected="selected" #{/if} value="${i}"> ${i} </option> 
									#{/list}
								</select>
								#{if ingerido.cantPorcionesSugeridas != 0}
									<span title="Cantidad Sugerida" style="font-size: 9px;">Sugerido(${ingerido.cantPorcionesSugeridas})</span> 
	                    		#{/if}
	                    	</div>
                    	</div>
                	#{/list}
                	<div class="clearfix"></div>
                </div>
                
                <h3><a href="#">Colación</a></h3>
                <div class="placeholder">
                	<input type="hidden" id="comidaHolder" value="COLACION1"/>
                	#{list items:dieta.getAlimentosTipoComida('COLACION1'), as:'ingerido'}
	                	<div class="alimentoBig">
	                    	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	                      %{
	                       		if(ingerido.getComible().getClass().getName().equals("models.Plato")){
	                       			out.print('<div class="alimentoImage"><img src="/public/images/icons/Plato-icon.png" alt=${ingerido.comible.nombre} /></div><div class="autorBtn"><a class="contactoAutor">.</a></div>');
	                       		}else{
	                       			out.print('<div class="alimentoImage"><img src="'+"${ingerido.comible.iconPath}"+'" alt=${ingerido.comible.nombre} /></div>');
	                       		}
	                    	}%
	                    	<h3>${ingerido.comible.nombre}</h3>
	                    	<input type="hidden" id="alimentos" name="alimento" value="${ingerido.comible.id}">
	                    	<input type="hidden" id="cantidades" name="cantidades" value="1">
	                    	<div class="alimentoStepper">
	                    		<select onchange="modificarIngerido(this, ${ingerido.comible.id})">
									#{list items:0..5, as:'i'}
    									<option #{if ingerido.cantPorcionesIngeridas == i} selected="selected" #{/if} value="${i}"> ${i} </option> 
									#{/list}
								</select>
								#{if ingerido.cantPorcionesSugeridas != 0}
									<span title="Cantidad Sugerida" style="font-size: 9px;">Sugerido(${ingerido.cantPorcionesSugeridas})</span> 
	                    		#{/if}
	                    	</div>
	                    </div>
                    #{/list}
                	<div class="clearfix"></div>
                </div>
                
                <h3><a href="#">Almuerzo</a></h3>
                <div class="placeholder">
                	<input type="hidden" id="comidaHolder" value="ALMUERZO"/>
                	#{list items:dieta.getAlimentosTipoComida('ALMUERZO'), as:'ingerido'}
	                	<div class="alimentoBig">
	                    	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	                        %{
	                       		if(ingerido.getComible().getClass().getName().equals("models.Plato")){
	                       			out.print('<div class="alimentoImage"><img src="/public/images/icons/Plato-icon.png" alt=${ingerido.comible.nombre} /></div><div class="autorBtn"><a class="contactoAutor">.</a></div>');
	                       		}else{
	                       			out.print('<div class="alimentoImage"><img src="'+"${ingerido.comible.iconPath}"+'" alt=${ingerido.comible.nombre} /></div>');
	                       		}
	                    	}%
	                    	<h3>${ingerido.comible.nombre}</h3>
	                    	<input type="hidden" id="alimentos" name="alimento" value="${ingerido.comible.id}">
	                    	<input type="hidden" id="cantidades" name="cantidades" value="1">
	                    	<div class="alimentoStepper">
	                    		<select onchange="modificarIngerido(this, ${ingerido.comible.id})">
									#{list items:0..5, as:'i'}
    									<option #{if ingerido.cantPorcionesIngeridas == i} selected="selected" #{/if} value="${i}"> ${i} </option> 
									#{/list}
								</select>
								#{if ingerido.cantPorcionesSugeridas != 0}
									<span title="Cantidad Sugerida" style="font-size: 9px;">Sugerido(${ingerido.cantPorcionesSugeridas})</span> 
	                    		#{/if}
	                    	</div>
	                    </div>
	                #{/list}
					<div class="clearfix"></div>
                </div>
                
                <h3><a href="#">Merienda</a></h3>
                <div class="placeholder">
                	<input type="hidden" id="comidaHolder" value="MERIENDA"/>
                	#{list items:dieta.getAlimentosTipoComida('MERIENDA'), as:'ingerido'}
	                	<div class="alimentoBig">
	                    	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	                       %{
	                       		if(ingerido.getComible().getClass().getName().equals("models.Plato")){
	                       			out.print('<div class="alimentoImage"><img src="/public/images/icons/Plato-icon.png" alt=${ingerido.comible.nombre} /></div><div class="autorBtn"><a class="contactoAutor">.</a></div>');
	                       		}else{
	                       			out.print('<div class="alimentoImage"><img src="'+"${ingerido.comible.iconPath}"+'" alt=${ingerido.comible.nombre} /></div>');
	                       		}
	                    	}%
	                    	<h3>${ingerido.comible.nombre}</h3>
	                    	<input type="hidden" id="alimentos" name="alimento" value="${ingerido.comible.id}">
	                    	<input type="hidden" id="cantidades" name="cantidades" value="1">
	                    	<div class="alimentoStepper">
	                    		<select onchange="modificarIngerido(this, ${ingerido.comible.id})">
									#{list items:0..5, as:'i'}
    									<option #{if ingerido.cantPorcionesIngeridas == i} selected="selected" #{/if} value="${i}"> ${i} </option> 
									#{/list}
								</select>
								#{if ingerido.cantPorcionesSugeridas != 0}
									<span title="Cantidad Sugerida" style="font-size: 9px;">Sugerido(${ingerido.cantPorcionesSugeridas})</span> 
	                    		#{/if}
	                    	</div>
	                    </div>
                    #{/list}
					<div class="clearfix"></div>
                </div>
                
                <h3><a href="#">Colación</a></h3>
                <div class="placeholder">
                	<input type="hidden" id="comidaHolder" value="COLACION2"/>
                	#{list items:dieta.getAlimentosTipoComida('COLACION2'), as:'ingerido'}
	                	<div class="alimentoBig">
	                    	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	                       %{
	                       		if(ingerido.getComible().getClass().getName().equals("models.Plato")){
	                       			out.print('<div class="alimentoImage"><img src="/public/images/icons/Plato-icon.png" alt=${ingerido.comible.nombre} /></div><div class="autorBtn"><a class="contactoAutor">.</a></div>');
	                       		}else{
	                       			out.print('<div class="alimentoImage"><img src="'+"${ingerido.comible.iconPath}"+'" alt=${ingerido.comible.nombre} /></div>');
	                       		}
	                    	}%
	                    	<h3>${ingerido.comible.nombre}</h3>
	                    	<input type="hidden" id="alimentos" name="alimento" value="${ingerido.comible.id}">
	                    	<input type="hidden" id="cantidades" name="cantidades" value="1">
	                    	<div class="alimentoStepper">
	                    		<select onchange="modificarIngerido(this, ${ingerido.comible.id})">
									#{list items:0..5, as:'i'}
    									<option #{if ingerido.cantPorcionesIngeridas == i} selected="selected" #{/if} value="${i}"> ${i} </option> 
									#{/list}
								</select>
								#{if ingerido.cantPorcionesSugeridas != 0}
									<span title="Cantidad Sugerida" style="font-size: 9px;">Sugerido(${ingerido.cantPorcionesSugeridas})</span> 
	                    		#{/if}
	                    	</div>
	                    </div>
                    #{/list}
					<div class="clearfix"></div>
                </div>
                
                <h3><a href="#">Cena</a></h3>
                <div class="placeholder">
                	<input type="hidden" id="comidaHolder" value="CENA"/>
                	#{list items:dieta.getAlimentosTipoComida('CENA'), as:'ingerido'}
	                	<div class="alimentoBig">
	                    	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	                      %{
	                       		if(ingerido.getComible().getClass().getName().equals("models.Plato")){
	                       			out.print('<div class="alimentoImage"><img src="/public/images/icons/Plato-icon.png" alt=${ingerido.comible.nombre} /></div><div class="autorBtn"><a class="contactoAutor">.</a></div>');
	                       		}else{
	                       			out.print('<div class="alimentoImage"><img src="'+"${ingerido.comible.iconPath}"+'" alt=${ingerido.comible.nombre} /></div>');
	                       		}
	                    	}%
	                    	<h3>${ingerido.comible.nombre}</h3>
	                    	<input type="hidden" id="alimentos" name="alimento" value="${ingerido.comible.id}">
	                    	<input type="hidden" id="cantidades" name="cantidades" value="1">
	                    	<div class="alimentoStepper">
	                    		<select onchange="modificarIngerido(this, ${ingerido.comible.id})">
									#{list items:0..5, as:'i'}
    									<option #{if ingerido.cantPorcionesIngeridas == i} selected="selected" #{/if} value="${i}"> ${i} </option> 
									#{/list}
								</select>
								#{if ingerido.cantPorcionesSugeridas != 0}
									<span title="Cantidad Sugerida" style="font-size: 9px;">Sugerido(${ingerido.cantPorcionesSugeridas})</span> 
	                    		#{/if}
	                    	</div>
	                    </div>
                    #{/list}
					<div class="clearfix"></div>
                </div>
                
            </div>
        </div>
        
        <div id="flexRight">
            <div id="frecuentes">
                <section>
                	 #{list items:frecuentes, as:'frecuente'}
	                	<div class="alimentoSmall">
	                        <div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	                    %{
	                       		if(frecuente.comible.getClass().getName().equals("models.Plato")){
	                       			out.print('<div class="alimentoImage"><img src="/public/images/icons/Plato-icon.png" alt=${frecuente.comible.nombre} /></div><div class="miniAutorBtn"><a class="contactoAutor">.</a></div>');
	                       		}else{
	                       			out.print('<div class="alimentoImage"><img src="'+"${frecuente.comible.iconPath}"+'" alt=${frecuente.comible.nombre} /></div>');
	                       		}
	                    	}%
	                        <input type="hidden" id="cantidades" name="cantidades" value="1">
	                        <input type="hidden" id="alimentos" name="alimento" value="${frecuente.comible.id}">
	                    	<h3>${frecuente.comible.nombre}</h3>
	                    	<div class="alimentoStepper">
	                    		<select onchange="modificarIngerido(this, ${frecuente.comible.id})"> 
								  <option selected="selected" value="1">1</option>
								  <option value="2">2</option>
								  <option value="3">3</option>
								  <option value="4">4</option>
								  <option value="5">5</option>
								</select>
	                    	</div>
	                    </div>
                    	<div class="clearfix"></div>
                	#{/list}
                </section>
            </div>
        </div>
        
        <div id="flexRight2">
	       	<div id="buscador">
        	  	<input type="text" id="textAlimento" title="Buscar alimentos" size="40" />
        	  	<br />
        	  	<br />
          		<button id="buscarAlimento" onclick="buscarAlimento();" class="btn"> Buscar Platos y Alimentos</button>
        	  	<br />
        	  	<br />
          		<button id="buscarAlimentoEA" onclick="buscarAlimentoEA();" class="btn"> Buscar Establecimiento Alimenticio</button>          		
          		<!-- Poner llamada ajax -->
          		<div id="resultadoAlimentos">
          			
          		</div>
			</div>
    	</div>
    	
   		<div class="alimentoSmall" style="display: none">
	        <div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
	        <div class="alimentoImage"><img src="@{'/public/images/icons/Salad-icon.png'}" alt="" /></div>
	        <div class="autorBtn"><a class="contactoAutor">.</a></div>
	        <input type="hidden" id="alimentos" name="alimento" value="1">
	        <input type="hidden" id="cantidades" name="cantidades" value="1">
	    	<h3>Leche</h3>
        </div>
    </div>
  </div>
  <div id="atencion-div" style="display:none;"><p id="texto-atencion-div" ></p></div>
  <!-- JavaScript at the bottom for fast page loading -->
  <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}"></script>
  <script src="@{'/public/javascripts/jquery.livequery.js'}"></script>  
  <script src="@{'/public/javascripts/jquery-ui-1.8.21.custom.min.js'}"></script>
<!--   <script src="@{'/public/javascripts/plugins.js'}"></script> -->
<!--   <script src="@{'/public/javascripts/script.js'}"></script> -->
	<script src="@{'/public/javascripts/jqamp-ui-spinner.js'}"></script>
	<script src="@{'/public/javascripts/jqamp-ui-spinner-numeric.js'}"></script>

  <script>
  	$(function() {
  		
  		//enter buscar alimentos
  		$("#textAlimento").keypress(function(event) {
  		  if ( event.which == 13 ) {
  			 buscarAlimento();
  		   }
  		});
  		
		$("#comidas").accordion({
			autoHeight: false,
			navigation: true
		});
		
		$("#navDrag").draggable({ axis: "x", containment: "nav", snap: ".navItem" });
		
		
		$(".navItem").click(function(e){
			// lo saco para dejar que cargue el dia seleccionado desde el controller
// 			e.preventDefault();
			
			$(".navItem").removeClass("selected");
			$(this).addClass("selected");
			
			var p = $(this);
			var position = p.position();
			$("#navDrag").animate({"left": position.left - 20}, "slow");
		});
		
		// marco el dia seleccionado
		$("#"+"${diaSemana}").click();
		
		/* COMIDA */
		
		/* Hacer draggable los elementos frecuentes */
		$( "#frecuentes .alimentoSmall" ).draggable({
			appendTo: "body",
			helper: "clone"
		});
		
		/* Hacer droppable div.placeholder */
		$( "#comidas .placeholder" ).droppable({
			activeClass: "ui-state-default",
			hoverClass: "ui-state-hover",
			accept: ":not(.ui-sortable-helper)",
			drop: function( event, ui ) {
				/* Insertar el elemento dentro de div.placeholder como child en el primer lugar */	
				$comida = ui.draggable;
				$a = $(this);
				var comibleId = $comida.find('#alimentos').val();
				var existe = false;
				var limiteMax = false;
				
				// identifica los alimentos existentes para la comidad y evalua si se debe modificar la cantidad o agregarlo
				$.each($a.find(".alimentoBig"), function(i, item){
					if (comibleId == $(item).find("#alimentos").val()) {
						// agrega 1 unidad a la cantidad existente del comible en el combo
						var cantAnterior = parseInt($(item).find(".alimentoStepper select").val());
						
						if (cantAnterior == 5) {
							limiteMax = true;
							alert("Cantidad máxima de unidades alcanzada. No puede seguir incrementando la cantidad.");
							return;
						}
						$(item).find(".alimentoStepper select").val(cantAnterior + 1);
						existe = true;
				 	}
				 });
				
				if (limiteMax) {
					// salir porque se alcanzo el maximo
					return;
				}
				
				registrarAlimento($a.find('#comidaHolder').val(), $comida.find('#alimentos').val(), $comida.find('#cantidades').val());

				if (!existe) {
					// se agrega en la UI
					$( "<div class='alimentoBig'></div>" ).html( ui.draggable.html() ).prependTo( this );
				}
			}
		}).sortable({
			items: "li:not(.placeholder)",
			sort: function() {
				$( this ).removeClass( "ui-state-default" );
			}
		});
		
		/* Link para borrar el alimento - Debe ser livequery porque los elementos son agregados dinámicamente y no pertenecen al DOM */
		$('a.deleteAlimento').livequery('click', function() {
			
			$element = $(this).parent().parent();
			console.log($element);
			//eliminarlos del dominio
			eliminarAlimento($element.parent().find('#comidaHolder').val(), $element.find('#alimentos').val());
			
			$(this).parent().parent().remove();
			return false;
		});
		
		/* Link para borrar el alimento - Debe ser livequery porque los elementos son agregados dinámicamente y no pertenecen al DOM */
		$('a.contactoAutor').livequery('click', function() {
			
			$element = $(this).parent().parent();
			console.log($element);
			//eliminarlos del dominio
			var idPlato = $element.find("#alimentos").val();

			var platoJSONId = '{"idPlato": "' + idPlato + '"}';
			
			$.ajax({
	  	        type: "POST",
	  	        url: "/platos/showAutorPlato",
	  	        data: platoJSONId,
	  	        dataType: "json",
	  	        contentType: "application/json"
	  		}).done(function(resultado){
	  	        	if(resultado.result == "ok"){
	  	        		var mensaje = resultado.nombreAutor + "(" + resultado.emailAutor + ")";
	  	        		$( "#texto-atencion-div" ).text(mensaje);
	  	        		$("#atencion-div").dialog({
	  	        			resizable: false,
	  	        			autoOpen:false,
	  	        			width:'auto',
	  	        			modal: true,
	  	        			title: "Información del autor",
	  	        			buttons: {
	  	        				"Aceptar": function() {
	  	        					$( "#atencion-div" ).dialog( "close" );
	  	        				}
	  	        			}
	  	        		});
	  	        		$( "#atencion-div" ).dialog( "open" );
	  	        	}
	  	        	else{
	  	        		mostrarMensajeAtencion("No se pudo obtener el nombre del autor.");
	  	        	}
	  	      	});
		});
		
		/* Stepper numéricos */
		var btnOpts = {
        	position: 'inside',
            up: {
                icon: 'ui-icon-triangle-1-n',
                title: 'Increment the value.'
            },
            down: {
                icon: 'ui-icon-triangle-1-s',
                title: 'Decrement the value.'
            },
            defaultAction: 'step',
            ctrlAction: 'halfStep',
            shiftAction: 'page'};
		var opts = {
                disabled: false,
                readonly: false,
                keyboard: {
                    allowed: null,
                    upDownArrows: {
                        defaultAction: 'step',
                        ctrlAction: 'halfStep',
                        shiftAction: 'page'
                    },
                    pageUpDown: true
                },
                mousewheel: {
                    defaultAction: 'step',
                    ctrlAction: 'halfStep',
                    shiftAction: 'page'
                },
                buttons: btnOpts,
                //incremental: true,
                //delay: 5000,
                //format: null,
                //parse: function(val) { return parseFloat(val) || 0; },
                min: false,
                max: false,
                empty: false,
                //step: 1,
                //halfStep: 0.5,
                //page: 10,
                
                // Events
                start: function(event) { console.log('Start Event Triggered.'); },
                spin: function(event, ui) { console.log('Spin Event Triggered; value: ' + ui.value); },
                stop: function(event) { console.log('Stop Event Triggered.'); },
                change: function(event) { console.log('Change Event Triggered.'); }
            };
		
           //  var spinner = $('.stepper').spinner(opts);
			
			$('.stepper').livequery(function(){
				$(this).spinner(opts);
			}); 
	});
  </script>
  <!-- end scripts -->

</body>
<!-- /html-->